<template>
    <div class="demo-userComp-basicData">
        <div class="author-demo">
            <div>作者：黄璋</div>
            <div>日期：2017/11/02</div>
        </div>
      <label>基础数据</label>
      <data-dictionary style="width:275px"
          basicUrl=""
          basicKey="CreditLevel"
          :defaultValue="getValue"
          v-model="getValue"
          @select-change="selectChange"
          @query-change="queryChange"
          @before-load="beforeLoad"
          @onload-success="onLoadSuccess"
          @on-error="onError"
          filterable>
          </data-dictionary> 传入basicKey = "CreditLevel"

      <div class="marginT20">
        <label>选中事件</label><textarea v-model="sc"></textarea> @select-change 返回val 格式为 {code:"",name:""}
      </div>

      <div class="marginT20">
        <label>查询事件</label><textarea v-model="qc"></textarea> @query-change 返回查询值 选中后并执行选中事件
      </div>
      <div class="marginT20">
        <label>加载前</label><textarea v-model="bl"></textarea> @before-load 加载前条件方法
      </div>
      <div class="marginT20">
        <label>加载失败</label><textarea v-model="oe"></textarea>  @on-error 加载失败后回调方法，返回失败信息
      </div>
      <div class="marginT20">
        <label>加载成功</label><textarea v-model="os"></textarea>@onload-success 加载成功后的回调函数 返回请求的data
      </div>
      <div class="marginT20">
        <label>v-model变化</label><textarea v-model="getValue"></textarea> 使用中v-model的变化双向绑定监听显示
      </div>


      <h3 style="margin-top: 50px">JavaScript代码</h3>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
              export default{
                    data () {
                      return {
                       getValue:'',
                      }
                    },
                    methods: {
                        //选中事件
                        selectChange: function(val){
                          //TODO val 返回 code name
                        },
                        //框内输入值
                        queryChange: function(query){
                           //TODO 返回输入框的值
                        },

                        // 加载成功回调函数
                        onLoadSuccess: function(data){
                           //TODO 返回正确preview Data
                        },
                        // 加载失败，返回错误信息
                        onError: function(v){
                           //TODO 返回错误信息
                        },
                        // 加载前回调函数
                        beforeLoad: function(){
                         //TODO
                        },
                    },
                    components: {
                    }
                  }
            </code>
        </pre>

        <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>

        </pre>

        <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_props">props</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>basicUrl</td>
                    <td>组件自定义的请求地址，如果不输入，则按照组件默认的地址请求数据</td>
                    <td>String</td>
                    <td>默认为http://192.168.10.241:7100/system/dictionarys/items?infoName="+basicKey+"&language=cn</td>
                </tr>
                <tr>
                    <td>basicKey</td>
                    <td>传入所选基础数据key值</td>
                    <td>String</td>
                    <td>无， 本次用例使用为CreditLevel</td>
                </tr>
                <tr>
                    <td>defaultValue</td>
                    <td>组件的初始化默认值</td>
                    <td>String</td>
                    <td>无默认值</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>未输入时显示的提示</td>
                    <td>String</td>
                    <td>请选择</td>
                </tr>
                <tr>
                    <td>placement</td>
                    <td>列表展开方向 有bottom 和 top 两种方式</td>
                    <td>String</td>
                    <td>bottom</td>
                </tr>
                <tr>
                    <td>filterable</td>
                    <td>添加搜索功能</td>
                    <td>boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>style</td>
                    <td>自定义样式</td>
                    <td>String</td>
                    <td>无</td>
                </tr>
                <tr>
                    <td>disabledIds</td>
                    <td>需要禁掉的选项</td>
                    <td>Object 格式为{'id':true/false} id 为需要禁掉的选项的Id true禁掉，false解禁</td>
                    <td>无</td>
                </tr>

                </tbody>
            </table>

        <div class="anchor">
                <!---->
                <!---->
                <h3>events</h3>
                <!---->
                <!---->
                <!---->
        </div>
        <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>select-change</td>
                    <td>选中下拉框时触发的事件</td>
                    <td>返回val 格式为 {code:"",name:""}</td>
                </tr>
                <tr>
                    <td>query-change</td>
                    <td>返回查询值 选中后并执行选中事件</td>
                    <td>返回搜索词</td>
                </tr>
                <tr>
                    <td>before-load</td>
                    <td>加载前触发的事件</td>
                    <td>无</td>
                </tr>
                <tr>
                    <td>onload-success</td>
                    <td>加载数据成功时触发的事件</td>
                    <td>返回请求到的数据</td>
                </tr>
                <tr>
                    <td>on-error</td>
                    <td>请求数据失败的时候触发的事件</td>
                    <td>返回失败信息</td>
                </tr>
                </tbody>
            </table>

            <div class="anchor">
                <!---->
                <!---->
                <h3>basicKey（基础数据与计量数据字典）</h3>
                <!---->
                <!---->
                <!---->
        </div>
        <table>
                <thead>
                <tr>
                    <th>字典编码</th>
                    <th>字典名</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>IsTrailer</td>
                    <td>挂车</td>
                </tr>
                <tr>
                    <td>CreditLevel</td>
                    <td>信誉等级</td>
                </tr>
                <tr>
                    <td>FlowStatus</td>
                    <td>流程状态</td>
                </tr>
                <tr>
                    <td>VehicleStatus</td>
                    <td>车辆状态</td>
                </tr>
                <tr>
                    <td>VehicleType</td>
                    <td>车辆类型</td>
                </tr>
                <tr>
                    <td>VType</td>
                    <td>内部车辆用途</td>
                </tr>
                <tr>
                    <td>VanType</td>
                    <td>厢型</td>
                </tr>
                <tr>
                    <td>FuelType</td>
                    <td>燃料类型</td>
                </tr>
                <tr>
                    <td>DriverType</td>
                    <td>司机类型</td>
                </tr>
                <tr>
                    <td>DriverStatus</td>
                    <td>司机状态</td>
                </tr>
                <tr>
                    <td>LicenseType</td>
                    <td>准驾车型</td>
                </tr>
                <tr>
                    <td>AcmStatus</td>
                    <td>门禁状态</td>
                </tr>
                <tr>
                    <td>Balance</td>
                    <td>结算方式</td>
                </tr>
                <tr>
                    <td>CustStatus</td>
                    <td>客户状态</td>
                </tr>
                <tr>
                    <td>SupplierStatus</td>
                    <td>供应商状态</td>
                </tr>
                <tr>
                    <td>CarrierStatus</td>
                    <td>承运商状态</td>
                </tr>
                <tr>
                    <td>CycleUnit</td>
                    <td>周期单位</td>
                </tr>
                <tr>
                    <td>PriceUnit</td>
                    <td>价格单位(元)</td>
                </tr>
                <tr>
                    <td>MtcschemeRuleid</td>
                    <td>保养到期规则</td>
                </tr>
                <tr>
                    <td>MileUnit</td>
                    <td>里程单位</td>
                </tr>
                <tr>
                    <td>AccessoryUnitId</td>
                    <td>数量单位</td>
                </tr>
                <tr>
                    <td>MtcKind</td>
                    <td>维保种类</td>
                </tr>
                <tr>
                    <td>MtcshopQualId</td>
                    <td>维修点资质</td>
                </tr>
                <tr>
                    <td>MtcStatus</td>
                    <td>维保状态</td>
                </tr>
                <tr>
                    <td>MtcType</td>
                    <td>维修/保养类型</td>
                </tr>
                <tr>
                    <td>DevKind</td>
                    <td>设备类型</td>
                </tr>
                 <tr>
                    <td>DevStatus</td>
                    <td>设备状态</td>
                </tr>
                <tr>
                    <td>DevShare</td>
                    <td>是否设备共用</td>
                </tr>
                <tr>
                    <td>DevUnit</td>
                    <td>设备单位</td>
                </tr>
                <tr>
                    <td>ParamStatus</td>
                    <td>参数状态</td>
                </tr>
                <tr>
                    <td>ParamUnit</td>
                    <td>参数单位</td>
                </tr>
                <tr>
                    <td>MpTypeId</td>
                    <td>衡器类型</td>
                </tr>
                <tr>
                    <td>WeightType</td>
                    <td>称重类型</td>
                </tr>
                <tr>
                    <td>VideoFlag</td>
                    <td>是否有视频标志</td>
                </tr>
                <tr>
                    <td>WarnFlag</td>
                    <td>计量点是否有警告</td>
                </tr>
                <tr>
                    <td>WgtCode</td>
                    <td>检斤类型</td>
                </tr>
                <tr>
                    <td>TarType</td>
                    <td>皮毛类型</td>
                </tr>
                <tr>
                    <td>DeputeStatus</td>
                    <td>委托单状态</td>
                </tr>
                <tr>
                    <td>MeasureStatus</td>
                    <td>计量状态</td>
                </tr>
                <tr>
                    <td>TerminalState</td>
                    <td>计量终端状态</td>
                </tr>
                <tr>
                    <td>ActualStatus</td>
                    <td>计量实绩状态</td>
                </tr>
                <tr>
                    <td>NetStatus</td>
                    <td>结净状态</td>
                </tr>
                <tr>
                    <td>ActiveStatus</td>
                    <td>是否逻辑删除</td>
                </tr>

                </tbody>
            </table>

        <!-- <div class="anchor"> -->
                <!---->
                <!---->
                <!-- <h3>basicKey（检化验字典）</h3> -->
                <!---->
                <!---->
                <!---->
   <!--      </div>
        <table>
                <thead>
                <tr>
                    <th>字典编码</th>
                    <th>字典名</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>QMS_CHK_ORDER_DETAIL</td>
                    <td>订单状态</td>
                </tr>
                <tr>
                    <td>QMS_CHK_TASK</td>
                    <td>任务类型</td>
                </tr>
                <tr>
                    <td>QMS_CHK_SAMPLE</td>
                    <td>样品类型</td>
                </tr>
                <tr>
                    <td>QMS_CHK_SAMPLE</td>
                    <td>样品分类</td>
                </tr>
                <tr>
                    <td>QMS_CHK_RESULT</td>
                    <td>检化验结果类型</td>
                </tr>
                <tr>
                    <td>QMS_CHK_RESULT</td>
                    <td>检化验结果类型</td>
                </tr>

                </tbody>
        </table> -->

    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default{
      data () {
        return {
         disabledIds:{'5C3183580A0272AFE053020011AC49E4':true},
         getValue:'',
         sc:'',//选中事件
         qc:'',//查询事件
         bl:'',//加载前
         oe:'',//加载失败
         os:'',//加载成功
         htmlCode:'<data-dictionary style="width:275px"\n'+
                    'basicUrl=""\n'+
                    'basicKey="CreditLevel"\n'+
                    ':defaultValue="getValue"\n'+
                    'v-model="getValue"\n'+
                    '@select-change="selectChange"\n'+
                    '@query-change="queryChange"\n'+
                    '@before-load="beforeLoad"\n'+
                    '@onload-success="onLoadSuccess"\n'+
                    '@on-error="onError" filterable>\n'+
                    '</data-dictionary>',
        }
      },
      methods: {
          //选中事件
          selectChange: function(val){
            var that = this;
            that.sc = "code:" + val.value + " name:" + val.label;
          },
          //框内输入值
          queryChange: function(query){
            var that = this;
            that.qc = query;
          },

          // 加载成功回调函数
          onLoadSuccess: function(data){
            var that = this;
            that.os = data.toString();
          },
          // 加载失败，返回错误信息
          onError: function(v){
            var that = this;
            that.oe = v;
          },
          // 加载前回调函数
          beforeLoad: function(){
            var that = this;
            that.bl = '加载前干的事';
          },
      },
      components: {
      },
      mounted: function () {
            window.setTimeout(function () {
                $('.demo-userComp-basicData pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },
    }

</script>


<style scoped lang="scss">
    .demo-userComp-basicData{
        margin: 40px;

        label {
          vertical-align: top;
          display: inline-block;
          width: 80px;
        }

        .marginT20 {
          margin-top: 20px;
        }

        table {
            font-family: Consolas,Menlo,Courier,monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        table td, table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
